<template>
    <div>
        <h1>姓名: {{ name }}</h1>
        <h1>年龄: {{ age + 10 + 1 / 2 + 1 }}岁</h1>
        <h1>学生: {{ student }}</h1>
        <h1>学生姓名: {{ student.name }}</h1>

        <h2>{{ arr }}</h2>
        <h2>{{arr.some(item => item > 20)}}</h2>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
// ref：定义任意类型的数据
const name = ref("张三");
const age = ref(20);

const arr = ref([10, 20, 30])

// reactive：定义引用类型的数据
const student = reactive({
    name: '李四',
    age: 18
});

// console.log(name.value);
// console.log(age.value);

// console.log(student.name);
// console.log(student.age);

// age.value++;
// name.value = "王五";

// student.age++;  // 允许修改

// 不建议直接对 reactive 的对象直接赋值
// student = { name: '', age: '' }

</script>




<style scoped></style>